<template>
    <div class="cart-info">
        <el-card shadow="hover" v-loading="loading">
            <NotCart v-if="cartList.length == 0" />
            <GoodsTable
                v-else
                :cartList="cartList"
                @change="change"
                :key="dateKey"
            />
        </el-card>
    </div>
</template>

<script setup>
import GoodsTable from './goods-table.vue'
import { ref, onMounted } from 'vue'
import { findUserCart } from '@/apis/cart'
import { findGoodsById } from '@/apis/goods'
import { ElMessage } from 'element-plus'
import NotCart from './not-cart.vue'
let loading = ref(true)
let dateKey = Date.now()
const cartList = ref([])
const findCart = () => {
    cartList.value = []
    findUserCart().then(res => {
        res.forEach(e => {
            e.testNumber = e.number
            e.visible = false
            e.disabled = false
            findGoodsById(e.goods_id).then(res => {
                cartList.value.push(Object.assign(e, res))
            })
        })
    })
    setTimeout(() => {
        loading.value = false
    }, 1000)
}
onMounted(() => {
    loading.value = true
    findCart()
})
const change = () => {
    loading.value = true
    findCart()
    dateKey = Date.now()
    ElMessage({
        message: '删除成功',
        type: 'success',
    })
}
</script>

<style lang="scss" scoped>
.cart-info {
    min-height: 500px;
    .el-card {
        width: 1240px;
        height: auto;
        min-height: 500px;
    }
}
</style>
